<template>
    <div>
        <el-dialog title="选择任务" v-model="isShowDialog" width="800px" @close="onClose">
            <el-card shadow="hover" class="juque_search_form">
                <div>
                    <el-form ref="searchFormRef" size="default" :inline="true" :model="formModel">
                        <el-form-item label="任务名称" prop="param.taskName">
                            <el-input v-model="formModel.param.taskName" show-word-limit maxlength="50" placeholder=""
                                clearable></el-input>
                        </el-form-item>
                        <el-form-item label="任务类型" prop="param.taskType">
                            <el-select v-model="formModel.param.taskType" placeholder="">
                                <el-option v-for="item in DictInfo.taskType" :key="item.key" :label="item.label"
                                    :value="item.key" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button size="default" type="primary" @click="onSearch">
                                <el-icon>
                                    <ele-Search />
                                </el-icon>
                                查询
                            </el-button>
                            <el-button size="default" type="default" @click="onRest">
                                <el-icon>
                                    <ele-RefreshLeft />
                                </el-icon>
                                重置
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-card>
            <el-card shadow="hover">
                <el-table :data="datasource" :border="true" class="juque_table">
                    <el-table-column prop="taskName" label="任务名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="taskType" label="任务类型" show-overflow-tooltip>
                        <template #default="scope">
                            <el-tag>{{ taskTypeCompute(scope.row.taskType) }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="targetTable" label="目标表" show-overflow-tooltip></el-table-column>
                    <el-table-column label="操作" fixed="right" width="200">
                        <template #default="scope">
                            <el-button size="small" text type="primary" @click="onCheck(scope.row)">
                                <el-icon>
                                    <ele-Select />
                                </el-icon>
                                选择
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                    :pager-count="5" :page-sizes="[10, 20, 30, 50]" v-model:current-page="formModel.pageInfo.page"
                    background v-model:page-size="formModel.pageInfo.limit" layout="total, sizes, prev, pager, next, jumper"
                    :total="formModel.pageInfo.total">
                </el-pagination>
            </el-card>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="() => onClose()" size="default">关 闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent, ref, onMounted, computed } from 'vue';
import { FormInstance, ElMessage } from 'element-plus';
import { TaskInfoSearchParamModel, TaskInfoListModel } from '/@/interfaces/DataPipelineModel';
import { handleSearch, } from '../task-info-wrap';
import MESSAGE from '/@/enums/message-enum';
import useObjectUtil from '/@/utils/objectUtil';
import { BaseRequest } from '/@/interfaces/BaseModel';
import { DictInfo } from '/@/enums/dict-info-enum';
import DatabaseSelect from '/@/views/database-info/component/database-select.vue';
import TaskScriptSelect from '/@/views/task-script/component/task-script-select.vue';

interface State {
    isShowDialog: boolean | false,
    datasource: TaskInfoListModel[],
    formModel: BaseRequest<TaskInfoSearchParamModel>,
}
export default defineComponent({
    name: 'TaskInfoList',
    components: { DatabaseSelect, TaskScriptSelect },
    emits: ['onCheck', 'onClose'],
    setup(props, context) {
        const searchFormRef = ref<FormInstance>();
        const state = reactive<State>({
            isShowDialog: true,
            datasource: [],
            formModel: {
                param: {
                    taskName: undefined,
                    taskType: undefined,
                    sourceDatabase: undefined,
                    targetDatabase: undefined,
                    targetTable: undefined,
                },
                pageInfo: {
                    page: 1,
                    limit: 10,
                    total: 0
                }
            },
        });
        const taskTypeCompute = computed(() => {
            return (value: number) => {
                const dictInfo = DictInfo.taskType.filter(item => item.key === value);
                return dictInfo && dictInfo.length > 0 ? dictInfo[0].label : value;
            }
        });
        const methodMap = reactive({
            onSearch: async function () {
                const response = await handleSearch(state.formModel);
                const { code, data, pageInfo } = response;
                if (code === MESSAGE.OK) {
                    useObjectUtil.copyProperties(pageInfo, state.formModel.pageInfo);
                    state.datasource = data ? [...data] : [];
                }
            },
            onRest: function () {
                searchFormRef.value?.resetFields();
            },
            onCheck: function (record: TaskInfoListModel) {
                if (record && record.id) {
                    context.emit('onCheck', record);
                    ElMessage.success('已选择【'+ record.taskName +'】');
                }
            },
            onHandleSizeChange: function (val: number) {
                state.formModel.pageInfo.limit = val;
                methodMap.onSearch();
            },
            onHandleCurrentChange: function (val: number) {
                state.formModel.pageInfo.page = val;
                methodMap.onSearch();
            },
            onClose: function () {
                state.isShowDialog = false;
                context.emit('onClose');
            }
        });
        // 挂载完成后
        onMounted(async () => {
            methodMap.onSearch();
        });
        return {
            searchFormRef,
            DictInfo,
            taskTypeCompute,
            ...toRefs(state),
            ...toRefs(methodMap),
        };
    },
});
</script>
<style scoped lang="scss">
@import '/@/views/task-info/task-info.scss';
</style>
